<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Segment - Basic</title>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>

<body onload="listenForEvent()">
  <ion-app>

    <ion-header>
      <ion-toolbar>
        <ion-title>Segment - Basic</ion-title>
      </ion-toolbar>

      <ion-toolbar>
        <ion-segment class="event-tester" value="Free">
          <ion-segment-button value="Paid">
            PaidPaidPaid
          </ion-segment-button>
          <ion-segment-button value="Free">
            Free
          </ion-segment-button>
          <ion-segment-button value="Top">
            Top
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <ion-toolbar>
        <ion-segment name="dynamicPropDisable" disabled color="danger">
          <ion-segment-button value="Bookmarks">
            Bookmarks
          </ion-segment-button>
          <ion-segment-button value="Reading List">
            Reading List
          </ion-segment-button>
          <ion-segment-button value="Shared Links">
            Shared Links
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <ion-toolbar>
        <ion-segment name="dynamicAttrElem" color="secondary" value="active">
          <ion-segment-button value="active">
            Active
          </ion-segment-button>
          <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
            Disabled
          </ion-segment-button>
          <ion-segment-button value="inactive" disabled="false">
            Inactive
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <ion-toolbar>
        <ion-segment value="all">
          <ion-segment-button value="all">
            All
          </ion-segment-button>
          <ion-segment-button value="missed">
            Missed
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>
    </ion-header>

    <ion-segment value="segment">
      <ion-segment-button value="segment">
        Segment
      </ion-segment-button>
      <ion-segment-button value="outside">
        Outside
      </ion-segment-button>
      <ion-segment-button value="content">
        Content
      </ion-segment-button>
    </ion-segment>

    <ion-content>
      <div class="ion-padding">
        <ion-segment>
          <ion-segment-button>
            <ion-label>Seg 1</ion-label>
          </ion-segment-button>
          <ion-segment-button>
            <ion-label>Seg 2</ion-label>
          </ion-segment-button>
          <ion-segment-button>
            <ion-label>Seg 3</ion-label>
          </ion-segment-button>
        </ion-segment>

        <ion-segment class="segment-no-animate" value="is">
          <ion-segment-button value="animate">
            <ion-label>Animate</ion-label>
          </ion-segment-button>
          <ion-segment-button value="is">
            <ion-label>Is</ion-label>
          </ion-segment-button>
          <ion-segment-button value="false">
            <ion-label>False</ion-label>
          </ion-segment-button>
        </ion-segment>

        <ion-segment color="dark" value="Reading List">
          <ion-segment-button value="Bookmarks">
            <ion-icon name="book"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="Reading List">
            <ion-icon name="search"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="Shared Links">
            <ion-icon name="time"></ion-icon>
          </ion-segment-button>
        </ion-segment>

        <ion-segment>
          <ion-segment-button value="330">
            <ion-label>330ml</ion-label>
          </ion-segment-button>
          <ion-segment-button value="440">
            <ion-label>440ml</ion-label>
          </ion-segment-button>
          <ion-segment-button disabled value="500">
            <ion-label>500ml</ion-label>
          </ion-segment-button>
          <ion-segment-button value="custom">
            <ion-icon name="create"></ion-icon>
          </ion-segment-button>
        </ion-segment>

        <ion-segment name="dynamicPropDisable" disabled color="danger">
          <ion-segment-button value="Bookmarks">
            <ion-label>Bookmarks</ion-label>
          </ion-segment-button>
          <ion-segment-button value="Reading List">
            <ion-label>Reading List</ion-label>
          </ion-segment-button>
          <ion-segment-button value="Shared Links">
            <ion-label>Shared Links</ion-label>
          </ion-segment-button>
        </ion-segment>

        <ion-segment id="finalSegment" name="dynamicAttrElem" color="secondary" value="active">
          <ion-segment-button value="active">
            <ion-label>Active</ion-label>
          </ion-segment-button>
          <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
            <ion-label>Disabled</ion-label>
          </ion-segment-button>
          <ion-segment-button value="inactive" disabled="false">
            <ion-label>Inactive</ion-label>
          </ion-segment-button>
        </ion-segment>

        <ion-segment name="dynamicAttrElem">
          <ion-segment-button value="active">
            <ion-label>Active</ion-label>
          </ion-segment-button>
          <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
            <ion-label>Disabled</ion-label>
          </ion-segment-button>
          <ion-segment-button value="inactive" disabled="false">
            <ion-label>Inactive</ion-label>
          </ion-segment-button>
        </ion-segment>

        <ion-segment>
          <ion-segment-button value="active">
            <div class="square red"></div>
          </ion-segment-button>
          <ion-segment-button name="dynamicAttrDisable">
            <div class="square green"></div>
          </ion-segment-button>
          <ion-segment-button value="inactive">
            <div class="square blue"></div>
          </ion-segment-button>
        </ion-segment>

        <!-- Dynamic Buttons -->
        <ion-segment id="dynamicButtons"></ion-segment>
      </div>

      <div class="ion-padding-horizontal">
        <ion-button expand="block" onClick="toggleDisabled()">Toggle Disabled</ion-button>
      </div>
      <div class="ion-padding">
        <ion-button expand="block" color="secondary" onClick="toggleValue()">Toggle Value</ion-button>
      </div>
      <div class="ion-padding-horizontal">
        <ion-button expand="block" color="tertiary" onClick="toggleSwipeGesture()">Toggle Swipe Gesture</ion-button>
      </div>

      <script>
        var dynamicAttrDisable = document.getElementsByName('dynamicAttrDisable');
        var dynamicPropDisable = document.getElementsByName('dynamicPropDisable');

        function toggleDisabled() {
          for (var i = 0; i < dynamicAttrDisable.length; i++) {
            const attrIsDisabled = dynamicAttrDisable[i].getAttribute('disabled') === 'true' ? false : true;
            dynamicAttrDisable[i].setAttribute('disabled', attrIsDisabled);
          }
          for (var i = 0; i < dynamicPropDisable.length; i++) {
            const propIsDisabled = dynamicPropDisable[i].disabled === true ? false : true;
            dynamicPropDisable[i].disabled = propIsDisabled;
          }
        }

        function toggleValue() {
          var dynamicAttrElem = document.getElementsByName('dynamicAttrElem');
          for (var i = 0; i < dynamicAttrElem.length; i++) {
            var dynamicAttrValue = dynamicAttrElem[i].getAttribute('value');

            if (dynamicAttrValue === 'active') {
              dynamicAttrElem[i].setAttribute('value', 'inactive');
            } else if (dynamicAttrValue === 'inactive') {
              dynamicAttrElem[i].setAttribute('value', 'disabled');
            } else {
              dynamicAttrElem[i].setAttribute('value', 'active');
            }
          }
        }

        function toggleSwipeGesture() {
          const ionSegmentElement = document.querySelectorAll('ion-segment');
          for (var i = 0; i < ionSegmentElement.length; i++) {
            ionSegmentElement[i].swipeGesture = !ionSegmentElement[i].swipeGesture;
          }
        }

        async function listenForEvent() {
          const ionSegmentElement = document.querySelector('ion-segment.event-tester');
          ionSegmentElement.addEventListener('ionChange', (event) => {
            console.log('event.target: ', event.target.value);
          });
        }

        var dynamicButtons = document.getElementById('dynamicButtons');
        updateSegmentButtons(2);

        setTimeout(function () {
          updateSegmentButtons(4);
        }, 4000);

        function updateSegmentButtons(length) {
          const buttonsLength = dynamicButtons.children.length;
          const begin = buttonsLength === 0 ? 0 : buttonsLength;

          for (var i = begin; i < length; i++) {
            const button = document.createElement('ion-segment-button');
            button.value = `segment-${i}`;
            button.innerHTML = `<ion-label>Btn ${i}</ion-label>`;

            dynamicButtons.appendChild(button);
          }
        }

      </script>
    </ion-content>

    <style>
      .square {
        width: 20px;
        height: 20px;
        background: black;
      }

      .square.red {
        background: red;
      }

      .square.green {
        background: green;
      }

      .square.blue {
        background: blue;
      }

      ion-content ion-segment {
        margin-bottom: 10px;
      }

      .segment-no-animate ion-segment-button {
        --indicator-transition: none;
        --indicator-transform: none;
      }
    </style>
  </ion-app>
</body>

</html>
